<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script> -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script>
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
    <title>只有功能展示，没有美化</title>
</head>
<body style="height: 100%;">
    <div id="contentPage">
        <!-- <div class="top">
            <div class="Logo">
                <span>BlogSystem</span>
            </div>
            <div class="top-menu">
                <ul>
                    <li>首頁</li>
                    <li>收藏本站</li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="Login-pad">
                <div v-if="userInfo == null">
                    <label>
                        <span>用戶名: </span>
                        <input type="userName" v-model="userName" id="">
                    </label>
                    <label>
                        <span>密碼: </span>
                        <input type="password" v-model="password" id="">
                    </label>
                    <button @click="onLogin">登录</button>
                    </div>
                    <div v-else>
                        <span>用户：{{userInfo.username}}</span>
                        
                        <button @click="onLoginout">注销</button>
                </div>
            </div>
        </div> -->
        <div class="center">
            <div class="center-left">
            </div>
                <div class="center-right">
                    <div class="nav">
                        <a href="">首頁</a>
                        ->
                        <a href="">文章查看</a>
                    </div>
                    <div class="news-pad" v-if="news != null">
                        <h3>{{news.title}}</h3>
                        <div class="news-info">
                            [作者：{{news.author}}][人气：{{news.hit}}][回复：{{news.replyCount}}[发布事件：{{tranTime(news.publishTime)}}]
                        </div>
                        <div class="news-content">
                            {{news.content}}
                        </div>
                    </div>
                    <hr>
                    <div class="repaly-pad">
                        <h3>网友回复</h3>
                        <div class="reply-list">
                            <div class="reply-list-item" v-for="reply in replys">
                                <p>{{reply.replyContent}}}</p>
                                <p style="text-align: right;">
                                    {{reply.nickName}} 发表于 &emsp13; 
                                    {{tranTime(reply.replyDate)}}</p>
                                <hr>
                            </div>
                        </div>
                        <div class="reply-pad">
                            <p>发表评论</p>
                            <p>标题：aaa</p>
                            <textarea v-if="token != null" v-model="replyContent" name="" id="" cols="30" rows="10"></textarea>
                            <div class="none-login" v-else>
                                <span>账号未登录，无法发表评论</span>
                            </div>
                            <el-button v-if="token != null" type="primary" @Click="onReply">评论</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom"></div>
    </div>
</body>

<script>
    const {createApp, ref, onMounted, toRefs, reactive } = Vue;
    const {ElMessage, ElMessageBox } = ElementPlus;
    const token = ref();
    const replys = ref([]);

    var searchUrl = location.search.substring(1,location.search.length);
    var paramGroups = searchUrl.split("&");
    var params = {};
    paramGroups.forEach(paramGroup => {
        var key = paramGroup.split("=")[0];
        var value = paramGroup.split("=")[1];
        params[key] = value;
    })

    function getToken()
    {
        token.value = localStorage["token"]
    }

    const app = createApp({
            setup() {                
                const news = ref();  
                const replyContent = ref();              
                const onReply = () => {
                    let userId = localStorage["userId"]
                    axios.post(`http://localhost:5143/api/Reply/AddReply/${localStorage['token']}`,{
                        userId,
                        replyContent:replyContent.value,
                        newsId:params["nid"]
                    }).then(res => {
                        if(res.status == 200)
                        {
                            history.go(0);
                        }
                        if(res.status == 203)
                        {
                            ElMessageBox.alert("当前登录状态已过期");
                            top.window.clearUserInfo();
                            window.getToken();                            
                        }
                    })
                }
                const tranKey =(key) =>
                {
                   return key.replaceAll(",","，");
                } 
                const tranTime =(time) => {
                    time = time.replaceAll("T"," ");
                    time = time.substring(0, time.indexOf("."))
                    return time
                }
                const getReplys = (nid)=>{
                    axios.get("http://localhost:5143/api/Reply/GetReply?newsId="+nid).then(res=>{
                        replys.value = res.data;
                    });
                }
                const getNews = (nid)=>{
                    axios.get(`http://localhost:5143/api/News/GetNewsDto/`+ nid).then(res => {
                        news.value = res.data
                    });
                }
                onMounted(() => {
                    window.getToken();
                    getNews(params["nid"])
                    getReplys(params["nid"]);
                    console.log(params["nid"])
                })
                return{
                    news,
                    replyContent,
                    tranTime,
                    onReply,
                    token,
                    replys
                };
            }
        }
    )
    app.use(ElementPlus, {
    locale: ElementPlusLocaleZhCn,
    })
    app.mount("#contentPage")
</script>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #contentPage {
        height: 100%;
    }
    #contentPage .top {
        background-color: cornflowerblue;
        height: 200px;
        position: relative;
    }

    #contentPage .top .top-menu {
        float:right
    }
    #contentPage .top .top-menu .li {
        float:left;
        list-style: none;
        margin-right: 10px;
    }
    #contentPage .top .Login-pad {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 46px;
        padding: 10px;
        padding-bottom: 6px;
        border-radius: 6px 0 0 0;
        background-color: beige;
    }
    #contentPage .center {
        display: flex;
        height: 100%;
    }
    #contentPage .center .center-left {
        height: 100%;
        width: 350px;
        border-right: 1px solid #eee;
    }
    #contentPage .center .center-right {
        flex: 1;
    }
    #contentPage .center .center-right .nav {
        background-color: #eee;
        height: 30px;
        width: 100%;
        line-height: 30px;
        padding-left: 10px;
    }
    .news-pad h3 {
        background-color:cornsilk;
        text-align: center;
        height: 36px;
        line-height: 36px;
    }
    .news-pad .news-info {
        text-align: center;
        padding: 10px 0;
    }
    .news-pad .news-content {
        width: 90%;
        margin: auto;
        text-indent: 24px;
        min-height: 200px;
    }
    .repaly-pad {
        width: 90%;
        margin: auto;
        padding-top: 20px;
    }
    .repaly-pad h3 {
        background-color:cornsilk;
        text-align: center;
        height: 36px;
        line-height: 36px;
    }
    .repaly-pad textarea {
        width: 100%;
        resize: none;
        padding: 10px;
    }
    .repaly-pad .none-login {
        width: 100%;
        height: 160px;
        border: 1px solid #999;
        text-align: center;
        line-height: 160px;
    }
</style>
</html>